<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>励控智能终端</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css"/>

    <style>
        .header {
            height: 60px;
            background-color: #009688;
            overflow: hidden;
            display: block;
        }

        .layui-nav {
            float: right;
        }

        .ant-card{
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        }

        #userMenu{
            display: none;
        }
    </style>
</head>

<body>
<div>

</div>
<div>
    <div class="header">

        <a style="float: left;line-height: 60px;padding-left: 16px;">
            <!--				<img src="img/logo.png" style="height: 30px;position: relative;top:-4px;" />-->
            <span style="font-size: 1.2rem;margin-left: 8px;color: #EAEAEA;font-family: '楷体';">智能控制终端</span>
        </a>
        <ul class="layui-nav  layui-bg-green" lay-filter="topnav">
            <li class="layui-nav-item  layui-this">
                <a href="javascript:loadPage(0,'settings')">系统设置</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:loadPage(1,'card')">一卡通</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:loadPage(2,'iot')">物联（单机版）</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:loadPage(3,'log')">系统日志</a>
            </li>

            <a class="layui-btn" onclick="toogleMenu()">
                <span id="user_name"></span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </a>

        </ul>
        <div style="position: absolute;right:20px;top:62px;z-index:99999;background:#009688;color:white;line-height: 40px;" id="userMenu">
            <ul class="ant-card">
                <li style="padding: 0 32px;cursor: pointer;" onclick="resetpassword()">修改密码</li>
                <li style="padding: 0 32px;cursor: pointer;" onclick="loginout()">退出登录</li>
            </ul>
        </div>
    </div>
    <div>
        <iframe id="content" style="width: 100%;border:none;"></iframe>
    </div>
</div>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/sha.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script>
    let menuShow=false;
    $("#content").height($(window).height() - 70);
    var hashMap = ['#settings', '#card', '#iot', '#log'];
    var hash = window.location.hash;
    if (hash && hash.length > 1) {
        var hashIndex = hashMap.indexOf(hash);
        if (hashIndex >= 0) {
            $('.layui-this').attr('class', 'layui-nav-item');
            $($('.layui-nav-item')[hashIndex]).addClass('layui-this')

            $("#content").attr('src', hash.slice(1) + ".html");
        } else {
            loadPage(0, 'settings');
        }
    } else {
        loadPage(0, 'settings');
    }
    $("#user_name").text(window.localStorage.getItem("user_name"));
    $(window).resize(function () {
        $("#content").height($(window).height() - 70);
    })


    function loadPage(index, page) {
        window.location.href = "#" + page
        $('.layui-this').attr('class', 'layui-nav-item');
        $($('.layui-nav-item')[index]).addClass('layui-this')

        $("#content").attr('src', page + ".html");
    }

    function toogleMenu(){
        menuShow=!menuShow;
        if(menuShow){
            $("#userMenu").show()
        }else{
            $("#userMenu").hide()
        }

    }


    function loginout(){
        toogleMenu()
        httpPost("admin/exit",{},function(res){
            window.location.href="/index.html"
        })
    }


    function resetpassword(){
        toogleMenu()
        layui.use(["layer"],function(){
            var layer=layui.layer;
            layer.open({
                type:2,
                title:"重置密码",
                content:"./resetpassword.html",
                area:["400px","280px"]
            })
        })
    }
</script>
</body>

</html>